<template>
  <div class="category">
    <!-- 标题 -->
    
    <!-- 搜索 -->

    <!-- 分类 -->
    <div class="category-container">
      <!-- 左边 -->
      <div class="menu-wrapper">
        <ul>
          <li
          class="menu-item"
          v-for="(menu,index) in categoryList" :key="index"
          :class="{current: index === currentIndex}"
          @click="clickList(index)"
          ref="menuList"
          >
          <!--  :class="{current: index === currentIndex}" -->
          {{menu.categoryName}}
          </li>
        </ul>
      </div>
      <!-- 右边 -->
      <div class="submenu-wrapper">
        <ul ref="itemList">
          <li class="sub-menu-li" v-for="(menu,sub) in categoryList" :key="sub">
            <div v-for="(menuSub,idx) in menu.subType" :key="idx">
              <div class="sub-title">
                <div class="line"></div>
                <div class="sub-title-text">{{menuSub.subTypeTitle}}</div>
                <div class="line"></div>
              </div>
              <ul class="sub-type-list">
                <li class=sub-type-item v-for="(item,i) in menuSub.subTypeList">
                  <img :src="item.image" class="sub-type-img">
                  <span class="sub-type-item-name">{{item.name}}</span>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 底部 -->
    <tabBar :selected="2"></tabBar>
  </div>
</template>

<script>
  import tabBar from '@/components/tabBar/tabBar'
  import BScroll from 'better-scroll';
  export default {
    name: 'Category',
    data() {
      return {
        categoryList:[],// 分类数据
        scrollY: 0, // Y轴
        rightLiTops:[], // 每个分类相对应的li内容的高度
      }
    },
    components: {
      tabBar
    },
    created () {
      this.pageInit();
    },
    watch:{
      // 监听分类集合数据
      categoryList () {
        this.$nextTick(()=>{
          // 实例化并监听左右两侧的滚动
          this.initWatchBScroll();
          // 监听右侧 li 的高度
          this.initComRightHeight();
        })
      }
    },
    computed:{
      currentIndex (index) {
        return this.rightLiTops.findIndex((tops,index) => {
          this.initLeftBScroll(index);
          return this.scrollY >= tops && this.scrollY < this.rightLiTops[index + 1]
        })
      }
    },
    methods:{
      // 初始化页面，获取后端接口数据
      pageInit () {
        this.$axios.get('/static/categoryMenus.json',{

        }).then(res=>{
          this.categoryList = res.data.categoryMenus;

        }).catch(error => {
          // 错误处理
          console.log(error);
        })
      },
      // 初始化左右两侧的better-scroll,并监听滚动事件
      initWatchBScroll () {
        // 左边滚动
        this.leftBscroll  = new BScroll('.menu-wrapper',{
          click:true
        });
        // 右边滚动
        this.rightBscroll  = new BScroll('.submenu-wrapper',{
          probeType:3 // 配置 在屏幕滚动过程中，派发scroll事件
        })
        // 监听右边 Y轴 滚动的自定义事件
        this.rightBscroll.on('scroll',(pos) => {
          this.scrollY = Math.abs(pos.y)
        })
      },
      // 求右边 li 的高度
      initComRightHeight () {
        let itemArray = []; // 定义一个伪数组
        let top = 0;
        itemArray.push(top);
        // 获取右边所有的 li，
        let allList = this.$refs.itemList.getElementsByClassName("sub-menu-li");
        // allList伪数组转化成真数组
        Array.from(allList).forEach(li=>{
          top += li.clientHeight; // 获取每个li的高度进行累加
          itemArray.push(top); // 让每个类别累加的高度，都分别puhs到这个数组，例如：[200.423,652,157]
        })
        this.rightLiTops = itemArray;
      },
      // 左侧和右侧联动
      initLeftBScroll (index) {
        let menu = this.$refs.menuList;
        let el = menu[index];
        // 右侧滚动时，让左侧滚动到相应的位置
        this.leftBscroll.scrollToElement(el,300,0,-300); // 相当于在左侧的better-scroll配置中加入这个;
      },
       //点击左边实现滚动
      clickList (index) {
          this.scrollY = this.rightLiTops[index];
          this.rightBscroll.scrollTo(0,-this.scrollY,200,)
      }
    }
  }

</script>
<style scoped lang="less">
  .category {
    width:100%;
    height:100%;
    background-color:#f5f5f5;
    overflow: hidden;
  }
  .category-container {
    display:flex;
    position: absolute;
    top: 60px;
    bottom: 50px;
    width: 100%;
    overflow: hidden;
  }
  /* 左边 */
  .menu-wrapper {
    background-color: #e0e0e0;
    width: 80px;
    flex: 0 0 80px;
  }
  .menu-item {
    width: 100%;
    height: 60px;
    background: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: lighter;
    color: #666;
    position: relative;
  }
  .current {
    color: #e02e24;
    background: #fff;
  }
  .current:before {
    content: '';
    background-color: #e02e24;
    width: 4px;
    height: 30px;
    position: absolute;
    left: 0;
  }


  /* 右边 */
  .submenu-wrapper {
    flex:1;
    background:#fff;
  }
  .sub-title {
    box-sizing:border-box;
    padding:0px 20px;
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .line {
    flex:1;
    height:1px;
    background-color:#ccc;
  }
  .sub-title-text {
    font-size:14px;
    margin:10px;
    text-align:center;
    position:relative;
  }

  .sub-type-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sub-type-item {
    width: 33.3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5px 0;
  }
  .sub-type-img {
    width:70px;
  }
  .sub-type-item-name {
    font-size:12px;
  }
</style>
